<template>
  <div>
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 注册
    </div>
    <div class="remider">
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <p>我们将以短信形式将验证码发送给您</p>
    </div>
    <div class="ipt">
      <!-- <van-field v-model="text" placeholder="请输入手机号" class="tel" />
      <van-button class="getCodebtn" round type="info">获取验证码</van-button> -->
      <van-field
        v-model="sms"
        center
        clearable
        placeholder="请输入短信验证码"
        
      >
        <template #button>
          <van-button size="small" class="getCodebtn" type="primary" @click="getCode">发送验证码</van-button>
        </template>
      </van-field>
    </div>
    <van-button
      @click="goReg2"
      class="btn"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
    >
      下一步
    </van-button>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: "Reg",
  data() {
    return {
      sms:''
    };
  },
  created() {
    console.log(this.$route.query.tel);
    
    this.tel=this.$route.query.tel
  },
  methods: {
    goBack() {
      this.$router.back();
    },

    goReg2() {
      this.$service.post('api/user/docheckcode', {
        tel: this.tel,
        telcode:this.sms
      }).then((res) => {
        if (res.data.code == '200') {
          this.$router.push("/Reg2?tel="+this.tel);
        } else {
         Toast('验证码错误')
        }
      })
    },

    // 产生随机验证码
    getCode() {
      this.$service.post('api/user/dosendmsgcode', {
        tel:this.tel,
      }).then((res) => {
        
        if (res.data.code == '200') {
          console.log("验证码",res.data.data);
          
        } else {
          Toast('验证码获取失败')
        }
        })
    },

   
        
    
  },
};
</script>

<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.ipt {
  width: 20rem;
  /* height: 6rem; */
  margin: 2rem auto;
}
.btn {
  margin: 0 auto;
  width: 80%;
  display: block;
  border-radius: 5rem;
}
.goreg {
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active {
  color: rgb(255, 77, 0);
}
.remider {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.getCodebtn {
  background-color: pink;
  color: red;
  border: 0;
  border-radius: 3rem;
}
</style>